---
import '@/styles/globals.css'
import { Card } from '@/components/ui/card'
import AuthLayout from '@/components/auth-layout.astro'
import { UserAuthForm } from '@/components/user-auth-form'

---
<AuthLayout>
  <Card className='p-6'>
    <div class='flex flex-col space-y-2 text-left'>
      <h1 class='text-2xl font-semibold tracking-tight'>Login</h1>
      <p class='text-sm text-muted-foreground'>
        Enter your email and password below <br />
        to log into your account
      </p>
    </div>
    <UserAuthForm />
    <p class='mt-4 px-8 text-center text-sm text-muted-foreground'>
      By clicking login, you agree to our{' '}
      <a
        href='/terms'
        class='underline underline-offset-4 hover:text-primary'
      >
        Terms of Service
      </a>{' '}
      and{' '}
      <a
        href='/privacy'
        class='underline underline-offset-4 hover:text-primary'
      >
        Privacy Policy
      </a>
      .
    </p>
  </Card>
</AuthLayout>
